<template>
	<view class="box">
		<view class="header-search">
			<view class="search-icon">
				<image src="../../../static/images/search.png" mode="aspectFill"></image>
				<input type="text" v-model="input" placeholder="请输入搜索" >
			</view>
			<view class="search-btn" @click="search()">
				搜索
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="history-box">
			<view class="history-box-title">
				<text>搜索历史</text>
				<image src="https://zu.qsnyjy.cn/uploads/20221220/5b0566d9295f12be927edcf66642d912.png" mode="aspectFill" @click="clear()"></image>
			</view>
			<view class="history-box-content">
				<text class="history-box-content-item" v-for="(item,index) in goodsList" :key="index" @click="gosearch(item)">
					{{item}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				input:'',
				history:['apple','banana'],
				listParams:{
					category_id: 0,
					keywords: '',
					page: 1
				},
				lastPage:1,
				goodsList:[],
				focus:false
				

			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.focus = true
			})
			if(uni.getStorageSync('historySearch')){
				this.goodsList = uni.getStorageSync('historySearch')
			}else {
				this.goodsList = []
			}
		},
		methods:{
			gosearch(item){	
				this.input = item
					this.$u.debounce(this.getGoodsList);
			},
			clear(){
				this.goodsList = []
				  uni.setStorageSync('historySearch',this.goodsList)
			},
			search(){
				// this.goodsList = [];
				// this.listParams.page = 1;
				// this.lastPage = 1;
				// this.listParams.keywords = this.input;
				this.$u.debounce(this.getGoodsList);
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			getGoodsList() {
				
				if(this.goodsList.includes(this.input)){
					this.goodsList.splice(this.goodsList.indexOf(this.input),1)
					this.goodsList.unshift(this.input)
					uni.setStorageSync('historySearch',	this.goodsList)
				}else {
				  this.goodsList.unshift(this.input)
				  uni.setStorageSync('historySearch',	this.goodsList)
				}
				
				
				
				this.jump('/pages/goods/list' ,{ search: this.input })
				
				// this.$http('goods.lists', this.listParams, '加载中...').then(res => {
				// 	// if (this.searchVal && !historyTag.includes(this.searchVal)) {
				// 	// 	let searchHistoryArr = JSON.stringify(this.getArr(historyTag, this.searchVal));
				// 	// 	uni.setStorageSync('searchHistoryArr', searchHistoryArr);
				// 	// }
				// 	if (res.code === 1) {
				// 		console.log(res);
				// 		// that.goodsList = [...that.goodsList, ...res.data.data];
				// 		// that.isEmpty = !that.goodsList.length;
				// 		// that.lastPage = res.data.last_page;
				// 		// that.loadStatus = that.listParams.page < res.data.last_page ? 'loadmore' : 'nomore';
				// 		// that.tempList = res.data.data;
				// 		// that.splitData();
				// 	}
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.box {
		min-height: 100vh;
		padding-top: 30rpx;
		background-color: #fff;
		
		.history-box {
			margin: 0 auto;
			width: 710rpx;
			margin-top: 36rpx;
			.history-box-title {
				display: flex;
				justify-content: space-between;
				padding:0 20rpx;
				font-size: 32rpx;
				color: #3D3D3D;
				align-items: center;
				font-weight: 500;
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
			
			.history-box-content {
				padding: 20rpx;
				width: 710rpx;
				display: flex;
				flex-wrap: wrap;
				.history-box-content-item {
					background-color: #F4F6F4;
					border-radius: 30rpx;
					padding: 4rpx 12rpx;
					font-size: 24rpx;
					color: #999999;
					margin-right:20rpx;
					margin-bottom: 10rpx;
				}
				.history-box-content-item:active {
						background-color: #dedfde;
					}
			}
		}
	}
	.header-search {
		width: 710rpx;
		height: 64rpx;
		border-radius: 32rpx;
		background-color: #fff;
		margin: 0 auto;
		border:2rpx solid #FF4747 ;
		display: flex;
		padding: 0 10rpx;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		.search-icon {
			display: flex;
			align-items: center;
			// width: 36rpx;
			height: 64rpx;
			padding-left: 30rpx;
			image {
			width: 36rpx;
			height: 34rpx;
			margin-right: 20rpx;
			
			input {
				// height: 64rpx;
				font-size: 28rpx;
			}
		
			}
		}
		
		.search-btn {
			width: 110rpx;
			height: 52rpx;
			background-color: #FF4747;
			color: #fff;
			line-height: 52rpx;
			text-align: center;
			border-radius: 26rpx;
		}
		.search-btn:active {
				background-color: #ee4242;
		}
	}
</style>